<script setup lang="ts">
import { ElPagination, PaginationProps } from 'element-plus';
import { computed } from 'vue';

import { IPageInfo } from '@/types';

const props = defineProps<{
  total: number;
  pageSize: number;
  currentPage: number;
  config?: Partial<PaginationProps>;
}>();
const emits = defineEmits<{
  (e: 'pageChange', pageInfo: IPageInfo): void;
  (e: 'update:pageSize', value: number): void;
  (e: 'update:currentPage', value: number): void;
}>();

const pageSize = computed({
  get: () => {
    return props.pageSize;
  },
  set: (val) => {
    emits('update:pageSize', val);
  },
});
const currentPage = computed({
  get: () => {
    return props.currentPage;
  },
  set: (val) => {
    emits('update:currentPage', val);
  },
});

const changeHandle = () => {
  emits('pageChange', {
    pageSize: props.pageSize,
    page: props.currentPage,
  });
};
</script>

<template>
  <el-pagination
    background
    layout="total,sizes, prev, pager, next"
    :total="total"
    v-model:page-size="pageSize"
    v-model:current-page="currentPage"
    :page-sizes="[10, 20, 50, 100, 200]"
    @sizeChange="changeHandle"
    @currentChange="changeHandle"
    v-bind="config"
  />
</template>
